<template>
  <div>
    <el-form ref="formData" :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label prop="name">
        <el-input v-model="formData.name" placeholder="姓名" />
      </el-form-item>
      <el-form-item label prop="mobile">
        <el-input v-model="formData.mobile" placeholder="手机号" />
      </el-form-item>
      <el-button type="primary" @click="searchClick">搜索</el-button>
      <el-button type="primary" @click="resetSearch">重置</el-button>
      <el-button type="primary" @click="add">批量添加</el-button>
    </el-form>
    <elec-table :list="tableData" @handleSelectionChange="handleSelectionChange" />
    <pagination ref="pagination" />
  </div>
</template>
<script>
import {
  getElecPersonalListPage
} from '@/api/elec/elec/personal'
import pagination from '@/components/pagination'
import elecTable from '../table'
export default {
  components: { pagination, elecTable },
  data() {
    return {
      smsTypeList: [],
      formData: {
        name: '',
        mobile: ''
      },
      tablebtn: 'mini',
      listLoading: false,
      tableData: [],
      selection: [],
      searchData: {},
      dictMap: {}
    }
  },
  methods: {
    // 批量添加
    add() {
      if (this.selection.length === 0) {
        this.$message({
          type: 'error',
          message: '至少选择一条数据'
        })
        return
      }
      this.$emit('addElec', this.selection)
    },
    // 重置搜索
    resetSearch() {
      this.$refs['formData'].resetFields()
      this.searchData = {}
      this.$refs.pagination.getData()
    },
    // 多选
    handleSelectionChange(arr) {
      this.selection = arr
    },
    // 搜索
    searchClick() {
      this.searchData = {
        ...this.formData
      }
      this.$refs.pagination.getData()
    },
    // 查询列表
    search() {
      const params = {
        ...this.$refs.pagination.pageData,
        ...this.searchData
      }
      return new Promise(resolve => {
        getElecPersonalListPage(params).then(res => {
          this.listLoading = false
          this.tableData = res.data.list
          this.dictMap = res.dictMap
          resolve(res.data)
        })
      })
    }
  }
}
</script>
